<template>
  <h2>grid布局</h2>
  <article>
    <div class="text">
      <h3>-----主盒子属性-----</h3>
      <p>grid-template: 定义网格模板，取值：像素，百分比，或者repeat重复</p>
      <p>grid-gap: 单元格间隙</p>
      <p>justify-items: 定义水平对齐方式</p>
      <p>align-items: 定义垂直轴对齐方式</p>
      <p>justify-content: 定义多跟轴线时水平对齐方式</p>
      <p>align-content: 定义多跟轴线时垂直轴对齐方式</p>
      <p>grid-auto-flow: 定义单元格自动遍历顺序</p>
      <h3>-----单元格属性-----</h3>
      <p>grid-column: 定义单元格在水平轴线上占多少格</p>
      <p>grid-row: 定义单元格在垂直轴线上占多少格</p>
      <p>justify-self: 定义单元格在水平方向上的对齐方式</p>
      <p>align-self: 定义单元格在垂直方向上的对齐方式</p>
    </div>
    <div>2</div>
    <div>3</div>
  </article>
  <el-button @click="showBox">按钮</el-button>
  <div class="fa-box" :class="isShow ? 'show' : ''">
    <div class="zi-box" :class="isShow ? 'is-show' : ''"></div>
  </div>
</template>
<script setup>
import { ref } from "vue";

let isShow = ref(false);
const showBox = () => {
  isShow.value = !isShow.value;
};
</script>
<style lang="scss" scoped>
@import "../../../style/common.scss";
h2 {
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
}

article {
  display: grid;
  width: 100%;
  min-height: 500px;
  height: auto;
  padding: 24px;
  border: 1px solid #eee;
  // grid-template-columns: 10% auto 10%;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  // justify-items: center;
  // align-items: end;
  gap: 24px;
  div {
    background-color: $main-color;
    border-radius: 10px;

    &:first-child {
      grid-row: 1/3;
      grid-column: 1/3;
    }
  }
  .text {
    padding: 16px;
    color: $hover-color;
  }
}

.fa-box {
  width: 200px;
  height: 200px;
  background-color: green;
  border: 1px solid #eee;
  opacity: 0;
  &.show {
    opacity: 1;
  }

  .zi-box {
    height: 0px;
    background: red;
    transition: all 3s ease;
  }

  .is-show {
    height: 160px;
  }
}
</style>
